<template>
    <div class="test">
        <!-- test -->

        <!-- 父子组件传参 -->
        <!-- {{activeColor}} -->
        <!-- <button @click="clkFn()">子组件向父组件传参</button> -->
        
        <!-- 插槽 -->
        <!-- 会被插槽中的内容替换，必须用slot承接
        后备内容：如果插槽无内容  则会显示slot内的内容 -->
        <!-- 匿名插槽（默认插槽）不写或name="default" -->
        <!-- <button>
            <slot name="default">submit</slot>
        </button> -->

        <!-- 具名插槽 -->
        <!-- <header>
            <slot name="header"/>
        </header>
        <main>
            <slot/>
        </main>
        <footer>
            <slot name="footer"/>
        </footer> 
        -->

        <!-- 作用域插槽(新的) -->
        <!-- <slot name="footer" :user="user">{{user.firstName}}</slot> -->

        <!-- 作用域插槽(旧的) -->
        <!-- <slot :user="user">{{user.firstName}}</slot> -->

        <!-- 独占默认插槽 -->
        <!-- <slot :user="user">{{user.firstName}}</slot> -->
    
        <!-- 解构插槽 Prop -->
        <!-- <slot name="jiegou" :user="user" :age="age">{{user.firstName}}</slot> -->
    
        <header>
            <slot name="header"/>
        </header>
        <main>
            <slot/>
        </main>
        <footer>
            <slot name="footer"/>
        </footer> 
    </div>
</template>

<script>
export default {
  // 父组件向子组件传参
  // props:["activeColor"],
  // Prop 验证
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    // activeColor: Number,
    // 多个可能的类型
    // activeColor: [String, Number],
    // 必填的字符串
    // activeColor: {
    //   type: String,
    //   required: true
    // },
    // 带有默认值的数字
    // activeColor: {
    //   type: Number,
    //   default: 100
    // },
    // 带有默认值的对象
    activeColor: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return { message: "hello" };
      }
    },
    // 自定义验证函数
    propF: {
      validator: function(value) {
        // 这个值必须匹配下列字符串中的一个
        return ["success", "warning", "danger"].indexOf(value) !== -1;
      }
    }
  },
  data() {
    return {
      user: {
        firstName: "贺",
        lastName: "凯鹏"
      },
      age: 18
    };
  },
  methods: {
    // 子组件向父组件传参
    clkFn() {
      this.$emit("autoClk", { a: 1 });
    }
  }
};
</script>

<style scoped>
</style>